<template>
    <div>
        <button @click="type='add'" :class="{active:type=='add'}">新增商品</button>
        <button @click="type='edit'" :class="{active:type=='edit'}">修改商品</button>
        <button @click="type='del1'" :class="{active:type=='del1'}">删除商品</button>
        <!--  组件占位符  is 引入组件的标签名称
        KeepAlive  状态的缓存
           include  哪些组件缓存  存储是组件名 而非标签名
           exclude  哪些组件不缓存
        举例 新增和修改缓存
        include="add,edit"
        exclude="del"
        -->
        <KeepAlive exclude="del">
        <component :is="type"></component>
        </KeepAlive>
    </div>
</template>
<script>
import GoodsAdd from "./GoodsAdd.vue"
import GoodsEdit from "./GoodsEdit.vue"
import GoodsDel from "./GoodsDel.vue"
export default {
    components:{
        add:GoodsAdd,
        edit: GoodsEdit,
        del1:GoodsDel
    },
     // 组件中的状态 必须是一个函数
   data() {
    return {
      type:'add'
    }
   }
};
</script>

<style scoped>

.active {
    background-color: red;
 }
 

</style>
